


import { changePoint } from "../event/mouseEvent";
import getInstance from './ctx';
import EditTagElement from './edittag'

class BaseElement {
	constructor({ x, y, r = 0, width, height, color, type, text }) {
		this.type = type;
		this.x = x;
		this.y = y;
		this.r = r;
		this.width = width || 2 * r;
		this.height = height || 2 * r;
		this.parent = null;
		this.ArrowList = []; //所有箭头
		this.text = text;
		this.color = color || "#999999";
		this.editTagList = [];
		// 绘制图形
		this.render = this.render.bind(this);
		this.drawSpecial = this.drawSpecial.bind(this);
		this.hover = this.hover.bind(this);
		this.canvas = getInstance(); // 绘图实例
		this.initEditTag.call(this);
		this.canvas.elementList.push(this)
	}

	/**
	 * 公共渲染方法
	 * @param {*} this.canvas.ctx
	 * @param {*} x 光标所在的x位置
	 * @param {*} y 光标所在的y位置
	 */
	render(x, y) {
		// console.log("this is render");
		// 是否是常规组件
		this.drawSpecial();

		if (
			(x && y && this.canvas.ctx.isPointInPath(x, y) && (!this.canvas.hoverElement || this.type === "EditTagElement")) ||
			this.isCurrent
		) {
			// console.log("这块区域被光标选中", this.type);
			if (this.canvas.isdruging) {
				this.canvas.ctx.fillStyle = "#fefefe";
			}
			this.canvas.hoverElement = this;
			// this.isCurrent = true; //当前元素被选中
			// this.canvas.ctx.fill();
			this.hover && this.hover(x, y);
		} else if (!this.canvas.hoverElement) {
			changePoint("default");
		}
	}
	/**
	 * 每个元素私有的渲染方法
	 */
	drawSpecial() { }
	hover(x, y) {
		console.log("baseElement hover");
		changePoint("move");
		this.editTagList.forEach((ele) => {
			ele.render(x, y)
		});
	}
	drug() {
		console.log("this is drug");
		this.moveEditTag(this.x, this.y);
	}
	initEditTag() {
		console.log("【initEditTag】");
		let positionList = [
			{
				x: this.x + this.width / 2 - this.r,
				y: this.y - this.r,
			},
			{
				x: this.x + this.width - this.r,
				y: this.y + this.height / 2 - this.r,
			},
			{
				x: this.x + this.width / 2 - this.r,
				y: this.y + this.height - this.r,
			},
			{
				x: this.x - this.r,
				y: this.y + this.height / 2 - this.r,
			},
		];

		positionList.forEach((tag, index) => {
			let editTag = new EditTagElement({ x: tag.x, y: tag.y });
			editTag.parent = this;
			this.editTagList[index] = editTag;
		});
	}
	moveEditTag(x, y) {
		console.log("【moveEditTag】");
		if (!x || !y) {
			throw new Error("坐标不能为零");
		}
		this.x = x;
		this.y = y;
		let positionList = [
			{
				x: this.x + this.width / 2 - this.r,
				y: this.y - this.r,
			},
			{
				x: this.x + this.width - this.r,
				y: this.y + this.height / 2 - this.r,
			},
			{
				x: this.x + this.width / 2 - this.r,
				y: this.y + this.height - this.r,
			},
			{
				x: this.x - this.r,
				y: this.y + this.height / 2 - this.r,
			},
		];

		positionList.forEach((tag, index) => {
			this.editTagList[index].x = tag.x;
			this.editTagList[index].y = tag.y;
			//
			this.editTagList[index].drug(tag.x, tag.y);
		});
	}

}




export default BaseElement;
